<html class="x-admin-sm">
<head>
    <th:block th:insert="head/head :: common_head"></th:block>
    <link rel="stylesheet" th:href="@{/ztree/css/metroStyle/metroStyle.css}">
    <style>
        /* 定义高亮样式 */
        .highlight {
            color: red;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md3">
            <div style="background-color: white;height: 97%">
                <div class="layui-inline" style="padding-top: 5px;padding-left: 5px;">
                    <input type="text" id="tree_name" placeholder="检索码" class="layui-input" autocomplete="off">
                </div>
                &nbsp;<button class="layui-btn" style="height: 36px;width: 40px;margin-top: 5px;" id="btn_query"><i class="layui-icon">&#xe615;</i></button>
<!--                <button class="layui-btn" style="height: 36px;width: 40px;margin-top: 5px;margin-left: -2px" id="btn_add"><i class="layui-icon layui-icon-add-1"></i></button>-->
                <ul id="list_ztree" class="ztree"></ul>
            </div>
        </div>
        <div class="layui-col-md9">
            <div style="background-color: white;height: 97%">
                <iframe src='' frameborder="0" scrolling="yes" class="x-iframe" id="xzjg_info" style="width: 100%;height: 100%"></iframe>
            </div>
        </div>
    </div>
</div>
<th:block th:insert="head/head :: common_jsfiles"></th:block>
<script type="text/javascript" th:src="@{/ztree/js/jquery.ztree.core.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/ztree/js/jquery.ztree.excheck.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/ztree/js/jquery.ztree.exhide.js}" charset="utf-8"></script>
<script>
    //后端地址
    var url = "[[${serverUrl}]]/sys/region/";
    //新增或修改后，返回需要展开的或者显示的节点，因为要更新节点名称。
    var rtnnode;
    //树形
    var zTree
    //配置ztree
    var setting = {
        data: {
            simpleData: {
                enable: true,            //simple模式开启
                idKey: "id",
                pIdKey: "pId",
                rootPId: null
            }
        },
        view: {
            fontCss : {color:"#676767"}
        },
        check: {
            enable: true,
            chkStyle: "checkbox",
            chkboxType: { "Y": "s", "N": "s" }
        },callback: {
            beforeClick: function(treeId, treeNode) {
                $("#xzjg_info").attr("src", treeNode.dz);
                return true;
            }
        }
    };
    //渲染树
    var renderTree = function (data){
        $.fn.zTree.init($("#list_ztree"), setting, data.treejson);
        zTree = $.fn.zTree.getZTreeObj("list_ztree");//获取ztree对象

        if (!is_null(rtnnode)){
            show_node(rtnnode);
        }
    }

    //标记节点，高亮
    function show_node(name){
        // 移除之前的高亮样式
        $(".highlight").removeClass("highlight");
        var nodes = zTree.getNodesByParamFuzzy("name", name);

        // 展开并高亮显示匹配的节点
        for (var i = 0; i < nodes.length; i++) {
            var node = nodes[i];
            // 展开节点及其父节点
            zTree.expandNode(node, true, true, true);
            var parent = node.getParentNode();
            while (parent) {
                zTree.expandNode(parent, true, false, false);
                parent = parent.getParentNode();
            }
            // 高亮显示节点
            var nodeDom = $("#" + node.tId + "_span");
            nodeDom.addClass("highlight");
        }
    }

    //搜索节点值
    $('#btn_query').click(function () {
        var name = $("#tree_name").val(); //搜索值
        show_node(name);
    })

    //增加按钮
    $('#btn_add').click(function () {
        $("#xzjg_info").attr("src", "info?lx=0");
    })

    //获取树形数据
    function init_tree(str){
        rtnnode = str;
        //发送的请求
        var jsonData = {
            timestamp:new Date().getTime()
        };
        var sendStr = {
            data:encrypt_str(JSON.stringify(jsonData),localStorage.getItem("a"),localStorage.getItem("b"))
        };
        post_json_form(url+"tree",JSON.stringify(sendStr),"数据加载中...",renderTree);
    }

    //首先执行
    init_tree();

</script>
</body>
</html>